<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色管理</title>
    <link href="${root}/js/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="${root}/js/lib/ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" />
    <script src="${root}/js/lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="${root}/js/lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script>   
    <link href="${root}/js/lib/css/common.css" rel="stylesheet" type="text/css" />  
    <script src="${root}/js/common/common.js" type="text/javascript"></script>    
    <script src="${root}/js/common/LG.js" type="text/javascript"></script>   
    <script src="${root}/js/common/ligerui.expand.js" type="text/javascript"></script> 
    <script src="${root}/js/lib/json2.js" type="text/javascript"></script>
    
     <script src="${root}/js/lib/jquery-validation/jquery.validate.min.js" type="text/javascript"></script> 
    <script src="${root}/js/lib/jquery-validation/jquery.metadata.js" type="text/javascript"></script>
    <script src="${root}/js/lib/jquery-validation/messages_cn.js" type="text/javascript"></script> 
</head>
<style type="text/css">
	body{padding:10px;height:100%;text-align:center;}
    .l-panel td.l-grid-row-cell-editing { padding-bottom: 2px;padding-top: 2px;}
</style>
<body>
	<form id="mainform">
		 <div id="maingrid"  style="margin:2px;"></div> 
	</form>
	<script type="text/javascript">
		//相对路径
	    var rootPath = "${root}/";
	    //列表结构
	    var grid = $("#maingrid").ligerGrid({
	        columns: [
	        { display: "主键", name: "RoleId", hide:true,width: 280, type: "text", align: "left", editor: { type: 'text' }
	      	},
	        { display: "角色名", name: "RoleName", width: '40%', type: "text", align: "left", validate: { required: true }, editor: { type: 'text' }
	        },
	        { display: "描述", name: "RoleDesc", width: '50%', type: "textarea", align: "left", editor: { type: 'text'} }],
	        	dataAction: 'server', pageSize: 20, toolbar: {},
	        url: rootPath + 'app/roleList', sortName: 'RoleID', 
	        width: '98%', height: '100%',heightDiff:-10, checkbox: false,enabledEdit: true, clickToEdit: false
	    });
		
	    var toolbarItems=[
							{id:'save',text:'保存',click:toolbarBtnItemClick,icon:'save'},
							{line:true},
			         		{id:'add',text:'新增',click:toolbarBtnItemClick,icon:'add'},
			         		{line:true},
			         		{id:'modify',text:'修改',click:toolbarBtnItemClick,icon:'modify'},
			         		{line:true},
			         		{id:'delete',text:'删除',click:toolbarBtnItemClick},
			         		{line:true},
			         		{id:'view',text:'取消',click:toolbarBtnItemClick}
			         		];
	    
	    //双击事件
	      //LG.setGridDoubleClick(grid, 'modify');

	      //验证
	      var maingform = $("#mainform");
	      $.metadata.setType("attr", "validate");
	      LG.validate(maingform, { debug: true }); 

	      //加载toolbar
	      //LG.loadToolbar(grid, toolbarBtnItemClick);
	    
	    
	    grid.toolbarManager.set('items', toolbarItems);
	   //工具条事件
	      function toolbarBtnItemClick(item)
	      {
	          var editingrow = grid.getEditingRow();
	          switch (item.id) {
	              case "add":
	                  //top.f_addTab(null, '增加角色信息', 'MemberManage/RoleDetail.aspx');
	                  if (editingrow == null)
	                  {
	                      addNewRow();
	                  } else
	                  {
	                      LG.tip('请先提交或取消修改');
	                  }
	                  break;
	              case "view":
	            	  if (editingrow != null)
	                  {
	                      grid.cancelEdit(editingrow); 
	                  } else
	                  {
	                      LG.tip('现在不在编辑状态!');
	                  }
	                  break;
	              case "modify":
	                  var selected = grid.getSelected();
	                  if (!selected) { LG.tip('请选择行!'); return }
	                  //top.f_addTab(null, '修改角色信息', 'MemberManage/RoleDetail.aspx?ID=' + selected.RoleID);
	                  if (editingrow == null)
	                  {
	                      beginEdit();
	                  } else
	                  {
	                      LG.tip('请先提交或取消修改');
	                  }
	                  break;
	              case "delete":
	                  jQuery.ligerDialog.confirm('确定删除吗?', function (confirm) {
	                      if (confirm)
	                          f_delete();
	                  });
	                  break;
	              case "save":
	                  if (editingrow != null)
	                  {
	                      grid.endEdit(editingrow);
	                  } else
	                  {
	                      LG.tip('现在不在编辑状态!');
	                  }
	                  break;
	          }
	      }
	   
	      function f_reload() {
	          grid.loadData();
	      }
	      function f_delete() {
	          var selected = grid.getSelected();
	          if (selected) {
	        	  if (!selected.RoleId)
	              {
	                  grid.deleteRow(selected);
	                  return;
	              }
	              LG.ajax({
	                  type: '/deleteRole',
	                  //method: 'RemoveRole',
	                  loading: '正在删除中...',
	                  data: { RoleId: selected.RoleID },
	                  success: function () {
	                      LG.showSuccess('删除成功');
	                      f_reload();
	                  },
	                  error: function (message) {
	                      LG.showError(message);
	                  }
	              });
	          }
	          else {
	              LG.tip('请选择行!');
	          }
	      }

	      grid.bind('beforeSubmitEdit', function (e)
	      {
	          if (!LG.validator.form())
	          {
	              LG.showInvalid();
	              return false;
	          }
	          return true;
	      });
	      grid.bind('afterSubmitEdit', function (e)
	      {
	          var isAddNew = e.record['__status'] == "add";
	          var data = $.extend(true, {}, e.newdata);
	          var str_type = isAddNew ? "/addRole" : "/updateRole";
	          //if (!isAddNew)
	           data.RoleId = e.record.RoleID;
	           LG.ajax({
	              loading: '正在保存数据中...',
	              type: str_type,
	              //提交路径
	              //path:'/addRole',
	              //method: isAddNew ? "addRole" : "updateRole",
	              data: data,
	              success: function ()
	              { 
	                  grid.loadData();
	                  LG.showSuccess("操作成功！");
	              },
	              error: function (message)
	              {
	                  LG.tip(message);
	              }
	          }); 
	          
	          return false;
	      }); 

	      function beginEdit()
	      {
	          var row = grid.getSelectedRow();
	          if (!row) { LG.tip('请选择行'); return; }
	          grid.beginEdit(row);
	      }
	      function addNewRow()
	      {
	          grid.addEditRow();
	      } 
	</script>
</body>
</html>